<template>
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
            <h3 class="text-lg font-semibold">待办事项</h3>
            <button class="text-primary text-sm hover:underline">查看全部</button>
        </div>

        <div class="divide-y divide-neutral-medium/30">
            <div v-for="(todo, index) in todos" :key="index" class="p-4 hover:bg-neutral-light/50 transition-bg">
                <div class="flex items-start">
                    <div class="mr-4 mt-0.5">
                        <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary"
                            v-model="todo.completed" @change="toggleTodo(todo)">
                    </div>
                    <div class="flex-1">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                            <h4 class="text-sm font-medium" :class="{ 'line-through text-neutral': todo.completed }">
                                {{ todo.title }}
                            </h4>
                            <span class="text-xs mt-1 md:mt-0" :class="getDeadlineClass(todo.deadline)">
                                {{ todo.deadline }}
                            </span>
                        </div>
                        <p class="text-xs text-neutral mt-1">{{ todo.description }}</p>
                        <div class="flex items-center mt-3 space-x-2">
                            <span class="px-2 py-0.5 text-xs rounded-full" :class="getPriorityClass(todo.priority)">
                                {{ todo.priority }}
                            </span>
                            <button class="text-primary text-xs hover:underline ml-auto"
                                @click="handleTodoAction(todo)">
                                {{ todo.action }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Todo {
    id: number
    title: string
    description: string
    deadline: string
    priority: string
    priorityClass: string
    action: string
    completed: boolean
}

const todos = ref<Todo[]>([
    {
        id: 1,
        title: 'CASE-20230512-001 案件审核',
        description: '审核李小明提交的服务质量争议案件材料',
        deadline: '今日 18:00 截止',
        priority: '高优先级',
        priorityClass: 'bg-danger/10 text-danger',
        action: '处理',
        completed: false
    },
    {
        id: 2,
        title: 'CASE-20230511-087 证据补充',
        description: '联系王建国补充合同纠纷案件的相关证据',
        deadline: '明日 12:00 截止',
        priority: '中优先级',
        priorityClass: 'bg-warning/10 text-warning',
        action: '处理',
        completed: false
    },
    {
        id: 3,
        title: '争议处理团队周会',
        description: '参加每周争议处理进度评审会议',
        deadline: '周五 10:00',
        priority: '会议',
        priorityClass: 'bg-info/10 text-info',
        action: '查看详情',
        completed: false
    },
    {
        id: 4,
        title: '5月处理报告提交',
        description: '提交5月份争议案件处理情况报告',
        deadline: '5月31日截止',
        priority: '低优先级',
        priorityClass: 'bg-neutral/10 text-neutral',
        action: '处理',
        completed: false
    }
])

const getDeadlineClass = (deadline: string) => {
    if (deadline.includes('今日')) return 'text-danger'
    if (deadline.includes('明日')) return 'text-warning'
    return 'text-neutral'
}

const getPriorityClass = (priority: string) => {
    const todo = todos.value.find(t => t.priority === priority)
    return todo?.priorityClass || 'bg-neutral/10 text-neutral'
}

const toggleTodo = (todo: Todo) => {
    // 在实际应用中，这里会更新后端数据
    console.log(`Todo ${todo.id} completed: ${todo.completed}`)
}

const handleTodoAction = (todo: Todo) => {
    alert(`执行操作: ${todo.action}\n任务: ${todo.title}\n在实际应用中，这里会打开相应的操作页面`)
}
</script>

<style scoped>
.transition-bg {
    @apply transition-colors duration-200;
}
</style>
